'use client'

import { signIn } from 'next-auth/react'
import { useState, useEffect } from 'react'
import { useRouter, useSearchParams } from 'next/navigation'
import { Form, Input, Button, message } from 'antd'
import { UserOutlined, LockOutlined } from '@ant-design/icons'

interface LoginForm {
  email: string
  password: string
}

export default function LoginPage() {
  const router = useRouter()
  const searchParams = useSearchParams()
  const [loading, setLoading] = useState(false)
  const [messageApi, contextHolder] = message.useMessage()

  const handleSubmit = async (values: LoginForm) => {
    setLoading(true)

    try {
      const callbackUrl = searchParams.get('callbackUrl') || '/dashboard'
      
      const result = await signIn('credentials', {
        ...values,
        redirect: false,
      })

      if (result?.error) {
        messageApi.error({
          content: '邮箱或密码错误',
          className: 'custom-message'
        })
        return
      }

      messageApi.success({
        content: '登录成功',
        className: 'custom-message'
      })
      router.replace(callbackUrl)
    } catch (error) {
      messageApi.error({
        content: '登录失败，请稍后重试',
        className: 'custom-message'
      })
    } finally {
      setLoading(false)
    }
  }

  return (
    <div className="min-h-screen flex items-center justify-center bg-background">
      {contextHolder}
      <div className="w-full max-w-md p-6 space-y-6 bg-background-paper/30 
                    backdrop-blur-lg border border-white/10 rounded-xl">
        <h2 className="text-2xl font-bold text-center text-white/90">
          登录
        </h2>

        <Form
          name="login"
          onFinish={handleSubmit}
          className="space-y-4"
          size="large"
        >
          <Form.Item
            name="email"
            rules={[
              { required: true, message: '请输入邮箱' },
              { type: 'email', message: '请输入有效的邮箱地址' }
            ]}
          >
            <Input 
              prefix={<UserOutlined className="text-white/30" />}
              placeholder="请输入邮箱"
              className="login-input"
            />
          </Form.Item>

          <Form.Item
            name="password"
            rules={[
              { required: true, message: '请输入密码' },
              { min: 6, message: '密码长度不能小于6位' }
            ]}
          >
            <Input.Password 
              prefix={<LockOutlined className="text-white/30" />}
              placeholder="请输入密码"
              className="login-input"
            />
          </Form.Item>

          <Form.Item>
            <Button 
              type="primary" 
              htmlType="submit" 
              loading={loading}
              className="w-full h-10 bg-primary-500 hover:bg-primary-600"
            >
              {loading ? '登录中...' : '登录'}
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  )
} 